<template>
    <v-sheet style="width: 60%">
        <div
            class="text-h6 text-md-h5 text-lg-h4 mb-8"
            style="color: grey"
        >
            My Profile
        </div>
        <div class="my-8 d-flex justify-space-between">
            <div
                class="d-flex flex-column align-center justify-start"
                style="width: 50%"
            >
                <v-avatar
                    color="grey"
                    size="150"
                    rounded="50"
                >
                    <v-img
                        cover
                        :src="'http://localhost:8080/api/picture/?id=' + User.id"
                    ></v-img>
                </v-avatar>
                <div class="my-2"></div>
                <div
                    class="w-75"
                    v-if="isEditMode"
                >
                    <v-file-input
                        accept="image/png, image/jpeg, image/bmp"
                        placeholder="Pick an avatar"
                        prepend-icon="mdi-camera"
                        label="Click to upload avator"
                        @update:modelValue="(files) => handleUploadPicture(files)"
                    ></v-file-input>
                </div>
            </div>
            <div
                v-if="isEditMode"
                style="width: 50%"
            >
                <v-text-field
                    v-model="formData.username"
                    prepend-inner-icon="mdi-rename"
                    :counter="10"
                    label="Username"
                ></v-text-field>
                <v-text-field
                    v-model="formData.phone"
                    prepend-inner-icon="mdi-email-outline"
                    label="Phone"
                ></v-text-field>
                <div class="my-16"></div>
                <div class="mx-auto w-100 d-flex flex-column align-end">
                    <v-btn
                        color="success"
                        class="mt-4 w-25"
                        @click="handleSave"
                    >
                        Save
                    </v-btn>
                    <v-btn
                        class="mt-4 w-25"
                        type="submit"
                        @click="handleCancel"
                    >
                        Cancel
                    </v-btn>
                </div>
            </div>
            <div
                v-else
                style="width: 50%"
            >
                <v-card
                    class="my-4"
                    title="Username"
                >
                    <template v-slot:prepend>
                        <v-avatar color="orange-darken-2">
                            <v-icon icon="mdi-account-outline"></v-icon>
                        </v-avatar>
                    </template>
                    <v-divider></v-divider>
                    <v-card-text style="font-size: 20px">{{ profile.username || '~empty' }}</v-card-text>
                </v-card>
                <v-card
                    class="my-4"
                    title="E-mail"
                >
                    <template v-slot:prepend>
                        <v-avatar color="blue-darken-2">
                            <v-icon icon="mdi-email-outline"></v-icon>
                        </v-avatar>
                    </template>
                    <v-divider></v-divider>
                    <v-card-text style="font-size: 20px">{{ profile.email || '~empty' }}</v-card-text>
                </v-card>
                <v-card
                    class="my-4"
                    title="Phone"
                >
                    <template v-slot:prepend>
                        <v-avatar color="green-darken-2">
                            <v-icon icon="mdi-phone-outline"></v-icon>
                        </v-avatar>
                    </template>
                    <v-divider></v-divider>
                    <v-card-text style="font-size: 20px">{{ profile.phone || '~empty' }}</v-card-text>
                </v-card>
                <div class="my-16"></div>
                <div class="mx-auto w-100 d-flex flex-column align-end">
                    <v-btn
                        color="info"
                        class="mt-4 w-25"
                        @click="handleEdit"
                    >
                        Edit
                    </v-btn>
                </div>
            </div>
        </div>
    </v-sheet>
</template>
<script setup>
import { useUserStore } from '../../../stores/user'
import { useRouter } from 'vue-router'
import { ref } from 'vue'
const User = useUserStore()
const router = useRouter()
const profile = ref({})
const formData = ref({
    username: '',
    phone: ''
})

const isEditMode = ref(false)

function handleSubmit(values) {
    // to do
}

function initialize() {
    User.getProfile(
        (data) => {
            profile.value = data
        },
        () => {
            router.push({
                name: 'home'
            })
        }
    )
}

initialize()

function handleEdit() {
    isEditMode.value = true
    formData.value = {
        username: profile.value.username,
        phone: profile.value.phone
    }
}

function handleCancel() {
    isEditMode.value = false
    formData.value = {
        username: '',
        phone: ''
    }
}

function handleUploadPicture(files) {
    if (files.length != 0) {
        const file = files[0]
        User.updateImage({
            avator: file
        },
        () => {
            window.location.reload()
        })
    }
}

function handleSave() {
    User.updateProfile(formData.value, () => {
        window.location.reload()
    })
}
</script>
